<template>
  <div class="product">
    <Hd></Hd>
    <img src="@/assets/img/banner.png" class="banner">
    <div class="container">
      <div class="productList">
        <div class="titleBox">
          <p class="des">产品涉及全面，专业知识为您提供专业服务</p>
          <h2 class="title">企业服务</h2>
        </div>
        <div class="cont" v-for="(item,i) in productList" :key="i">
          <h3 class="title">{{item.title}}</h3>
          <p class="desc">{{item.desc}}</p>
          <router-link :to="{path:'productDetail',query:{productId:item.id}}" class="detailBtn">查看详情></router-link>
        </div>
      </div>

      <div class="productList">
        <div class="titleBox">
          <p class="des">产品涉及全面，专业知识为您提供专业服务</p>
          <h2 class="title">政务服务</h2>
        </div>
        <div class="cont" v-for="(item,i) in goveList" :key="i">
          <h3 class="title">{{item.title}}</h3>
          <p class="desc">{{item.desc}}</p>
          <router-link :to="{path:'productDetail',query:{productId:item.id}}" class="detailBtn">查看详情></router-link>
        </div>
      </div>

      <div class="customize">
        <div class="titleBox">
          <p class="des">产品涉及全面，专业知识为您提供专业服务</p>
          <h2 class="title">定制服务</h2>
        </div>
        <img src="@/assets/img/banner.png" class="custPic">
        <div class="cont">
          <p class="desc">产品涉及全面，专业知识为您提供专业服务</p>
          <router-link :to="{path:'productDetail'}" class="detailBtn">查看详情></router-link>
        </div>
      </div>
    </div>
    <Ft></Ft>
  </div>
</template>
<script>
export default {
  name: "product",
  data() {
    return {
      productList: [
        {
          title: 'CMS管理系统',
          desc: '专注十二年，互联网深度定制服务商；丰富的设计经验，深厚的技术积淀，专业团队为您提供一站式解决方案。',
          label: ['专业', '经验'],
          id: 0
        },
        {
          title: 'CMS管理系统',
          desc: '专注十二年，互联网深度定制服务商；丰富的设计经验，深厚的技术积淀，专业团队为您提供一站式解决方案。',
          label: ['专业', '经验'],
          id: 1
        },
        {
          title: 'CMS管理系统',
          desc: '专注十二年，互联网深度定制服务商；丰富的设计经验，深厚的技术积淀，专业团队为您提供一站式解决方案。',
          label: ['专业', '经验'],
          id: 2
        }
      ],
      goveList: [
        {
          title: 'CMS管理系统',
          desc: '专注十二年，互联网深度定制服务商；丰富的设计经验，深厚的技术积淀，专业团队为您提供一站式解决方案。',
          label: ['专业', '经验'],
          id: 0
        },
        {
          title: 'CMS管理系统',
          desc: '专注十二年，互联网深度定制服务商；丰富的设计经验，深厚的技术积淀，专业团队为您提供一站式解决方案。',
          label: ['专业', '经验'],
          id: 1
        },
        {
          title: 'CMS管理系统',
          desc: '专注十二年，互联网深度定制服务商；丰富的设计经验，深厚的技术积淀，专业团队为您提供一站式解决方案。',
          label: ['专业', '经验'],
          id: 2
        }
      ],
    }
  },
  methods: {
  },
  mounted() {
  }
}
</script>

<style lang="scss">
.product {
  .banner {
    display: block;
    width: 100%;
    height: 5rem;
  }
  .container {
    padding: 0 0.35rem;
    .productList {
      .cont {
        padding: 0.4rem 0.32rem;
        background: #fff;
        margin-top: 0.3rem;
        .title {
          font-size: 0.32rem;
          font-weight: 500;
        }
        .desc {
          font-size: 0.24rem;
          color: #999999;
          line-height: 0.4rem;
          margin: 0.2rem 0;
        }
        .detailBtn {
          display: block;
          width: 1.7rem;
          height: 0.4rem;
          line-height: 0.36rem;
          border: 1px solid #3c66f6;
          font-size: 0.26rem;
          color: #3c66f6;
          text-align: center;
        }
      }
    }
    .customize {
      .custPic {
        display: block;
        width: 100%;
        height: 2.64rem;
      }
      .cont {
        margin: -0.7rem auto 0.5rem;
        width: 6.4rem;
        height: 1.8rem;
        background: #ffffff;
        padding: 0.4rem 0;
        box-sizing: border-box;
        position: relative;
        .desc {
          font-size: 0.3rem;
          text-align: center;
          font-weight: 500;
        }
        .detailBtn {
          display: block;
          width: 1.7rem;
          height: 0.4rem;
          line-height: 0.36rem;
          border: 1px solid #3c66f6;
          font-size: 0.26rem;
          color: #3c66f6;
          text-align: center;
          margin: 0.32rem auto 0;
        }
      }
    }
  }
}
</style>